<?php
$this->title = 'Index';
use yii\bootstrap\ActiveForm as bActiveForm;
use yii\bootstrap\Alert;
use yii\bootstrap\Button;
use yii\bootstrap\ButtonDropdown;
use yii\bootstrap\ButtonGroup;
use yii\helpers\Html;
use yii\widgets\ActiveForm;

?>
<h1><?= Html::encode($this->title) ?></h1>
<?= Html::tag('p', Html::encode($this->title), ['class'=>'title'])?>
<p>Please fill out the following fields to login:</p>

<?php $form = ActiveForm::begin(); ?>
    <?= $form->field($model, 'username') ?>
    <?= $form->field($model, 'password_hash')->passwordInput() ?>
    <?= Html::submitButton('Login') ?>
<?php ActiveForm::end(); ?>

<?php \backend\components\HelloWidget::begin();?>
sample content that may contain one or more <strong>HTML</strong> <pre>tags</pre>

If this content grows too big, use sub views

For e.g.
<?php \backend\components\HelloWidget::end();?>
<br>
<?php
// 点击触发事件模态框Modal
\yii\bootstrap\Modal::begin([
        'id'=>'page-modal',
    'header'=>'<h5>这里是标题</h5>',
    'toggleButton'=>['label'=>'click me']
]);
echo "这里是模态内容.....";
\yii\bootstrap\Modal::end();
Html::a('点击按钮', '#', [
    'class'       => 'btn btn-success',
    'data-toggle' => 'modal',
    'data-target' => '#page-modal'    //此处对应Modal组件中设置的id
])

?>


<?php $form=ActiveForm::begin(['id'=>'form-signup'])?>
<?= $form->field($model, 'username')->label('文本框信息') ?>
<?= $form->field($model, 'username')->label('文本框下方的提示')->hint('测试hint'); ?>
<?= $form->field($model, 'username')->label('input的类型')->input('text')?>
<!--简单文本框-->
<?= $form->field($model, 'username')->label('简单文本框')->textInput(['maxlength' => true])?>
<!--//隐藏文本框-->
<?= $form->field($model, 'username')->label('隐藏文本框')->hiddenInput() ?>
<!--//密码文本框，应用于登录的密码输入框-->
<?= $form->field($model, 'username')->label('密码文本框，应用于登录的密码输入框')->passwordInput() ?>
<!--//文本域 应用于输入内容较多比如文章简介等 rows=>3 表示文本域高为3-->
<?= $form->field($model, 'username')->label('应用于输入内容较多比如文章简介等,列比较宽')->textarea(['rows'=>'3']) ?>
<!--//文件上传-->
<?= $form->field($model, 'username')->label('文件上传')->fileInput() ?>
<!--//勾选框-->
<?= $form->field($model, 'username')->label('勾选框')->radio() ?>
<!--//多选框-->
<?= $form->field($model, 'username')->label('多选框')->checkbox() ?>
<!--//listbox-->
<?= $form->field($model, 'username')->listBox(['0'=>'box1','1'=>'box2']) ?>
<!--//多谢框列表，常用-->
<?= $form->field($model, 'username')->checkboxList(['0'=>'box1','1'=>'box2']) ?>
<!--//单选框列表，常用-->
<?= $form->field($model, 'username')->label('单选框列表')->radioList(['0'=>'radio1','1'=>'radio2'])?>
<!--//下拉框列表-->
<?= $form->field($model, 'username')->label('下拉框')->dropDownList(
    ['1'=>'下拉选项1','2'=>'下拉选项2'],
    ['prompt' => '请选择']
) ?>
<!--//插件组件应用，比如yii2编辑器插件，图片上传插件-->
<?= $form->field($model,'username')->widget(yii\captcha\Captcha::className())?>
<div class="form-group">
    <?= Html::submitButton('按钮', ['class' => 'btn btn-primary', 'name' => 'signup-button']) ?>
</div>
<?php ActiveForm::end();?>
<br>
<br>
<?php
$form = bActiveForm::begin(['layout' => 'horizontal']);
# 隐藏form的标签
echo $form->field($model, 'username', [
    'inputOptions'=>[
        'placeholder' => $model->getAttribute('username'),
    ],
])->label(false);

// 内联 radio list
//echo $form->field($model, 'username')->inline()->radioList($items);
 //水平模式控制文本框的大小
 echo $form->field($model, 'username', [
     'horizontalCssClasses' => [
         'wrapper' => 'col-sm-2',
     ]
 ]);
// 除了'default（默认）' 布局 你还可以用 'template' 制定特定的布局:
echo $form->field($model, 'username', [
    'template' => '{label} <div class="row"><div class="col-sm-4">{input}{error}{hint}</div></div>'
]);

// 自定义输入框的结构
echo $form->field($model, 'username', [
    'inputTemplate' => '<div class="input-group"><span class="input-group-addon">@</span>{input}</div>',
]);

// 因为某些问题进行警告
echo Alert::widget([
    'options' => [
        'class' => 'alert-info',
    ],
    'body' => '保存失败！',
]);

// 同上用于警告
\common\widgets\Alert::begin([
        'options'=>[
                'class'=>'alert-warning'
        ],
]);
echo '保存失败';
\common\widgets\Alert::end();


// 设置导航组件。
echo \yii\bootstrap\Nav::widget([
   'items'=>[
        [
            'label'=>'Home',
            'url'=>['index/index'],
            'linkOptions'=>['class'=>'style'],// 设置链接样式
        ],
       [
           'label'=>'Dropdown',
           'items'=>
               [
                   ['label'=>'Level 1 - Dropdown A', 'url'=>'#'],
                    '<li class="divider"></li>',
                    '<li class="dropdown-header">Dropdown Header</li>',
                    ['label'=>'Level 1 - Dropdown B', 'url'=>'#']
               ],
       ],
       [
           'label'=>'Login',
            'url'=>['site/login'],
            'visible'=>Yii::$app->user->isGuest
       ]
   ],
    'options'=>['class'=>'nav-pills'],//设置导航的样式
]);
?>

<?php
use yii\bootstrap\Collapse;
// 用于折叠按钮内容。
echo Collapse::widget([
    'items' => [
        // equivalent to the above
        [
            'label' => '折叠1',
            'content' => '<a href="aaa">--内容1</a>',
            // open its content by default
            'contentOptions' => ['class' => 'in']
        ],
        // another group item
        [
            'label' => '折叠2',
            'content' => '<a href="aaa">--内容2</a>',
        ],
        // if you want to swap out .panel-body with .list-group, you may use the following
        [
            'label' => '折叠3',
            'content' => [
                '<a href="aaa">--内容3-1</a>',
                '<a href="aaa">--内容3-2</a>'
            ],
            'footer' => 'Footer' // the footer label in list-group
        ],
    ]
]);
//按钮组（ButtonGroup）的实例演示如下
echo ButtonGroup::widget([
    'buttons' => [
        ['label' => '按钮A'],
        ['label' => '按钮B'],
        ['label' => '隐藏按钮C', 'visible' => false], // false用于隐藏按钮。
    ]
]);
// button group with an item as a string
echo ButtonGroup::widget([
    'buttons' => [
        Button::widget(['label' => '按钮A']),
        ['label' => '按钮B'],
    ]
]);

//下拉按钮（ButtonDropdown）
echo ButtonDropdown::widget([
    'label' => 'Action',
    'dropdown' => [
        'items' => [
            ['label' => 'DropdownA', 'url' => '/'],
            ['label' => 'DropdownB', 'url' => '#'],
        ],
    ],
]).PHP_EOL;
echo $this->context->layout_data;
?>
<!--<div class="list-group">-->
<!---->
<!--    <a href="#" class="list-group-item list-group-item-action active">-->
<!--        Cras justo odio-->
<!--    </a>-->
<!--    <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>-->
<!--    <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>-->
<!--    <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>-->
<!--    <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>-->
<!--</div>-->

